<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="layout w-full h-full box-border bg-white p-[20px]" ref="RefLayout">
        <div class="search box-border pb-[20px]">
          <a-row>
            <a-col :span="12">
              <SeachInput
                class="search-item"
                v-model="filterData.code"
                placeholder="请输入项目编号搜索"
                style="width: 328px"
                allow-clear
                @change="getTableData"
              >
              </SeachInput>
              <a-button
                class="ml-2 bg-[#E5EFFE!important] cursor-pointer"
                @click="moreFilterKey = !moreFilterKey"
              >
                <template #icon>
                  <icon-filter style="color: #1459fa" />
                </template>
              </a-button>
            </a-col>
            <a-col :span="12" class="flex justify-end">
              <a-button type="primary" trigger="hover" @click="projectAdd"> 添加项目 </a-button>
            </a-col>
          </a-row>
          <div
            class="more-filter-box w-full h-[80px] mt-[20px] mb-0 p-[20px] pl-[10px] pr-[10px] box-border bg-[#F7F9FC]"
            v-if="moreFilterKey"
          >
            <a-row class="w-full h-[40px] overflow-hidden" justify="start">
              <a-col :span="6">
                <TextInput
                  class="search-item"
                  v-model="filterData.name"
                  placeholder="请输入项目名称"
                  allow-clear
                  @change="getTableData"
                >
                  <template #prefix> 项目名称 </template>
                </TextInput>
              </a-col>
              <a-col :span="6">
                <TextInput
                  class="search-item"
                  v-model="filterData.manager"
                  placeholder="请输入项目经理"
                  allow-clear
                  @change="getTableData"
                >
                  <template #prefix> 项目经理 </template>
                </TextInput>
              </a-col>
              <a-col :span="6">
                <a-range-picker
                  class="search-item"
                  v-model="DateRange"
                  @change="getTableData"
                  style="width: 100%"
                >
                  <template #prefix> 起始日期 </template>
                </a-range-picker>
              </a-col>
              <a-col :span="6" style="align-self: center">
                <a-link @click="resetFilter">重置</a-link>
              </a-col>
            </a-row>
          </div>
        </div>

        <div
          class="table-box w-full overflow-hidden"
          :style="{
            height: 'auto',
            maxHeight: moreFilterKey ? 'calc(100% - 192px)' : 'calc(100% - 92px)'
          }"
        >
          <CommonTable
            :loading="loading"
            :tableData="listData"
            :columnsData="columns"
            :operatorData="operatorData"
            :pageTotal="page.total"
            :operatorCollapse="4"
            @handlerOperator="handlerOperator"
            @handlerPaginationChange="handlerPaginationChange"
          >
            <template #status="{ record }">
              <span v-if="record.status === '完成'" class="flex justify-start items-center">
                <div class="circle-point mr-1 border-[#34C94F]"></div>
                完成
              </span>
              <span v-else-if="record.status === '停滞'" class="flex justify-start items-center">
                <div class="circle-point mr-1 border-[#FF4C38]"></div>
                停滞
              </span>
              <span v-else class="flex justify-start items-center">
                <div class="circle-point mr-1 border-[#FFAC38]"></div>
                进行中
              </span>
            </template>
          </CommonTable>
        </div>
      </div>

      <a-modal
        v-model:visible="removePopKey"
        title-align="start"
        class="chunk-delete-box"
        width="448px"
      >
        <template #title>
          <span style="font-size: 16px; font-weight: bold; color: #394d73">是否确认删除该财务数据</span>
        </template>
        <div
          class="chunk-delete-info-box"
          style="font-size: 14px; font-weight: normal; color: #465a80"
        >
          <icon-exclamation-circle-fill class="text-yellow-500" />
          删除后该财务无法恢复
        </div>
        <template #footer>
          <div class="w-full h-full flex justify-end items-center">
            <a-button @click="removePopKey = false">取消</a-button>
            <a-button type="primary" class="ml-2" @click="toRemove">确定</a-button>
          </div>
        </template>
      </a-modal>
    </template>
  </PageMain>
</template>
<script lang="ts" setup>
import { getList, onDelete } from '@/api/assetManagement/resource_project/index';
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { columns, operatorData } from './values';
import { Message } from '@arco-design/web-vue';

const router = useRouter();
const route = useRoute();
const RefLayout = ref();

const DateRange = ref([]);

// filter 筛选条件
const filterData = ref({
  code: '', //项目编号
  end_time: '', //结束时间
  manager: '', //项目经理
  name: '', //项目名称
  start_time: '', //开始时间
  stop_begin_time: '', //停止开始时间
  stop_end_time: '' //停止结束时间
});
//分页信息
const page = ref({
  page: 1,
  page_size: 10,
  total: 0
});
const moreFilterKey = ref(false);
// table表格数据
const listData = ref<any>([]);

function resetFilter() {
  filterData.value = {
    code: '', //项目编号
    end_time: '', //结束时间
    manager: '', //项目经理
    name: '', //项目名称
    start_time: '', //开始时间
    stop_begin_time: '', //停止开始时间
    stop_end_time: '' //停止结束时间
  };
  nextTick(() => {
    getTableData();
  });
}
/**
 * @method handlerPaginationChange 分页事件
 */
function handlerPaginationChange(type: string, num: number) {
  if (type === 'num') {
    page.value.page = num;
  } else {
    page.value.page = 1;
    page.value.page_size = num;
  }
  getTableData();
}

/**
 * @method getTableData 获取表格数据
 */

const loading = ref(false);
const getTableData = async () => {
  loading.value = true;
  try {
    let params = {
      page: page.value.page,
      page_size: page.value.page_size,
      ...filterData.value
    };
    if (DateRange.value.length > 0) {
      params.start_time = DateRange.value[0];
      params.end_time = DateRange.value[1];
    }
    let { data, total, code } = await getList(params);
    if (code === '00000') {
      page.value.total = total;
      listData.value = data;
      loading.value = false;
      return;
    }
  } catch (e) {
    loading.value = false;
  }
};

/**
 * @method handlerOperator 操作事件
 */
function handlerOperator(record: any, item: any) {
  if (!record || !item) return;
  if (item.code === 'showDetail') {
    showDetail(record);
  } else if (item.code === 'edit') {
    projectEdit(record);
  } else if (item.code === 'delete') {
    deleteAsset(record);
  } else if (item.code === 'association') {
    resrelationView(record);
  }
}
/**
 * @method showDetail 查看详情
 */
function showDetail(item: any) {
  const { id } = item;
  if (!id) return;
  router.push({
    name: 'CheckDetail',
    query: {
      id: id
    }
  });
}

// 删除资源
const removePopKey = ref(false);
const removePopData = ref<any>(null);
function deleteAsset(item: any) {
  removePopKey.value = true;
  removePopData.value = item;
}
const toRemove = async () => {
  const { id } = removePopData.value;
  try {
    let res = await onDelete(id);
    if (res.code == '00000') {
      Message.success('删除成功');
    } else {
      Message.error(res.message);
    }
  } catch (err) {
    console.log(err);
  }
await  getTableData();
  removePopKey.value = false;
};

/**
 * @method projectAdd 项目添加
 */

function projectAdd() {
  // 添加资源
  router.push({
    name: 'ProjectAdd'
  });
}

/**
 * @method projectEdit 项目编辑
 */
function projectEdit(item: any) {
  if (!item || !item.id) return;
  router.push({
    name: 'ProjectEdit',
    query: {
      id: item.id
    }
  });
}

/**
 * @method resrelationView 关联资源
 */
function resrelationView(item: any) {
  if (!item || !item.id) return;
  router.push({
    name: 'ResourceResrelation',
    query: {
      id: item.id
    }
  });
}
function watchEnterHandler(e: KeyboardEvent) {
  if (route.name != 'projectIndex') return;
  if (e.key === 'Enter') {
    getTableData();
  }
}

onUnmounted(() => {
  // 移除键盘监听
  window.removeEventListener('keydown', watchEnterHandler);
});

onMounted(() => {
  getTableData();
  window.addEventListener('keydown', watchEnterHandler);
});
</script>

<style lang="less" scoped>
.circle-point {
  // @apple w-[12px] h-[12px] bg-[#00C853] rounded-full flex justify-center items-center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border-width: 2px;
}
.more-filter-box {
  .arco-row {
    .arco-col {
      padding: 0 10px;
      box-sizing: border-box;
    }
  }
}
</style>

<style lang="less">
.chunk-delete-box {
  .arco-modal-wrapper {
    .arco-modal {
      padding: 0;
      .arco-modal-header,
      .arco-modal-footer {
        border: 0;
      }
      .arco-modal-body {
        .chunk-delete-info-box {
          svg {
            color: #f1aa3c;
            width: 20px;
            height: 20px;
            position: relative;
            top: 2px;
          }
        }
      }
    }
  }
}
.search-item {
  border: 1px solid #d3dbeb;
  background-color: #fff;
  border-radius: 4px;
}
</style>
